<template lang="html">
 <div class="main">
   <panel :title="`近5年前往${type}类型国家图形分析报表`" class="panel">
     <div slot="right">
       <router-link style="font-size: 16px;color: #000; font-family: 新宋体;"  :to="{ path: '/warn/country/' + type}">图表分析</router-link>
       <router-link style="font-size: 16px;color: #000; font-family: 新宋体;"  :to="{ path: '/warn/table'}">返回上一统计</router-link>
     </div>

     <div class="body">
       <el-table class="table"
          :data="tableData" @row-click="selectRow">
          <el-table-column
            prop="name"
            label="出访国家/地区">
          </el-table-column>
          <el-table-column :label="`${item}`" v-for="item in [2018, 2017, 2016, 2015, 2014]" :key="item">
            <el-table-column
              :prop="`tasknum_${item}`"
              label="任务数"
              width="80">
            </el-table-column>
            <el-table-column
              :prop="`num_${item}`"
              label="占全年总比"
              width="100">
            </el-table-column>
          </el-table-column>
          </el-table>
     </div>
   </panel>
 </div>
</template>

<script>
import panel from '@/components/panel.vue';
export default {
  data () {
    return {
      loading: false,
      tableData: [],
      type: '一带一路'
    };
  },
  components: {
    panel
  },
  watch: {
  },
  methods: {
    selectRow (row) {
      this.$router.push('/warn/buy/');
    },
    loadData () {
      //
      let data = [
        {
          name: '美国',
          tasknum_2018: '2000',
          tasknum_2017: '2000',
          tasknum_2016: '2000',
          tasknum_2015: '2000',
          tasknum_2014: '2000',
          num_2018: '20%',
          num_2017: '20%',
          num_2016: '20%',
          num_2015: '20%',
          num_2014: '20%'
        }, {
          name: '法国',
          tasknum_2018: '2000',
          tasknum_2017: '2000',
          tasknum_2016: '2000',
          tasknum_2015: '2000',
          tasknum_2014: '2000',
          num_2018: '20%',
          num_2017: '20%',
          num_2016: '20%',
          num_2015: '20%',
          num_2014: '20%'
        }, {
          name: '加拿大',
          tasknum_2018: '2000',
          tasknum_2017: '2000',
          tasknum_2016: '2000',
          tasknum_2015: '2000',
          tasknum_2014: '2000',
          num_2018: '20%',
          num_2017: '20%',
          num_2016: '20%',
          num_2015: '20%',
          num_2014: '20%'
        }, {
          name: '英国',
          tasknum_2018: '2000',
          tasknum_2017: '2000',
          tasknum_2016: '2000',
          tasknum_2015: '2000',
          tasknum_2014: '2000',
          num_2018: '20%',
          num_2017: '20%',
          num_2016: '20%',
          num_2015: '20%',
          num_2014: '20%'
        }
      ];
      this.tableData = data;
    }
  },
  mounted () {
    console.log('xxxxxx', this.$route.params);
    if (this.$route.params.type) {
      this.type = this.$route.params.type;
    }
    this.$nextTick(_ => {
      this.loading = true;
      this.loadData();
    });
  }
};
</script>

<style lang="css" scoped>
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  .panel {
    height: 100%;
    width: 100%;
    position: relative;
   .body {
     height: 100%;
     width: 100%;
     display: flex;
     flex-direction: row;
     align-items: stretch;
     padding-left: 10px;
     .table {
       margin: 10px;
       background-color: inherit;
       margin-right: 30px;
       height: 100%;
       width: 100%;
     }
   }
  }
}

</style>
